<template>
  <!-- 出海资讯 -->
  <div class="outsea">
    <h2>{{ lbata.theme }}</h2>
    <!-- 轮播 -->
    <div class="outsea_swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in lbata.list" :key="i">
          <div class="outsea_swipe_item">
            <img :src="item.img" alt="" />
          </div>
          <div class="outsea_swipe_item_content">
            <h2>{{item.title}}</h2>
            <p>
              {{item.param}}
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="more">
      <a href="">查看更多 &nbsp;&rarr;</a>
    </div>
  </div>
</template>

<script>
export default {
  props: ["lbata"],
};
</script>

<style scoped>
.outsea {
  background: #f8f8f8;
  padding: 0 30px 20px 30px;
}
.outsea > h2 {
  text-align: center;
  font-size: 1.8em;
  padding: 25px 0 10px 0;
}
/* 轮播 */
.outsea_swipe {
  margin: 18px 0;
  background: #fff;
  box-shadow: 0 2px 16px 0 rgb(102 102 102 / 45%);
  border-radius: 12px;
}
.outsea_swipe_item {
  width: 100%;
}
.outsea_swipe_item > img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
}
.outsea_swipe_item_content {
  padding: 0 20px 10px 20px;
}
.outsea_swipe_item_content > h2 {
  font-size: 1.3em;
  padding-top: 12px;
}
.outsea_swipe_item_content > p {
  padding: 12px 0;
  font-size: 1.2em;
  color: #6f7b8e;
}
.more {
  text-align: center;
}
.more > a {
  color: #077af1;
  font-size: 1.2em;
  font-weight: bold;
}
</style>